<template>
  <div class="bottoms">
    <div class="t-bottom">
      <div class="t-bottom-item">
        <dl>
          <dt @click="goPage(pageData.unibtm && pageData.unibtm.jpUrl1)">{{ pageData.unibtm && pageData.unibtm.title1 }}</dt>
          <template v-if="pageData.unibtm && pageData.unibtm.btList1">
            <dd v-for="(child, idx) in pageData.unibtm.btList1" @click="goPage(child.jpUrl)"  :key="idx">{{ child.title }}</dd>
          </template>
        </dl>
      </div>
      <div class="t-bottom-item">
        <dl>
          <dt @click="goPage(pageData.unibtm && pageData.unibtm.jpUrl2)">{{ pageData.unibtm && pageData.unibtm.title2 }}</dt>
          <template v-if="pageData.unibtm && pageData.unibtm.btList2">
            <dd v-for="(child, idx) in pageData.unibtm.btList1" @click="goPage(child.jpUrl)" :key="idx">{{ child.title }}</dd>
          </template>
        </dl>
      </div>
      <div class="t-bottom-item">
        <dl>
          <dt @click="goPage(pageData.unibtm && pageData.unibtm.jpUrl3)">{{ pageData.unibtm && pageData.unibtm.title3 }}</dt>
          <template v-if="pageData.unibtm && pageData.unibtm.btList3">
            <dd v-for="(child, idx) in pageData.unibtm.btList1" @click="goPage(child.jpUrl)" :key="idx">{{ child.title }}</dd>
          </template>
        </dl>
      </div>
      <div class="t-bottom-item">
        <dl class="t-bottom-item-area">
          <dt @click="goPage(pageData.unibtm && pageData.unibtm.jpUrl4)">{{ pageData.unibtm && pageData.unibtm.title4 }}</dt>
          <dd>
            <p style="margin-top: 0;">{{ pageData.unibtm && pageData.unibtm.btObj && pageData.unibtm.btObj.cuDesc }}</p>
          </dd>
        </dl>
      </div>
      <div class="t-bottom-item">
        <dl class="t-bottom-item-area">
          <dt @click="goPage(pageData.unibtm && pageData.unibtm.jpUrl6)">{{ pageData.unibtm && pageData.unibtm.title6 }}</dt>
          <dd>
            <p style="margin-top: 0;">{{ pageData.unibtm && pageData.unibtm.btObj2 && pageData.unibtm.btObj2.desc }}</p>
          </dd>
        </dl>
      </div>
      <div class="t-bottom-item">
        <dl class="t-bottom-item-icons">
          <dt @click="goPage(pageData.unibtm && pageData.unibtm.jpUrl5)">{{ pageData.unibtm && pageData.unibtm.title5 }}</dt>
          <dd>
            <img :src="getImgUrl(pageData.unibtm && pageData.unibtm.btObj1 && pageData.unibtm.btObj1.qrCode)" alt="">
            <div v-if="pageData.unibtm && pageData.unibtm.btObj1 && pageData.unibtm.btObj1.othList" class="t-bottom-item-icons-group">
               <img v-for="(item, index) in pageData.unibtm.btObj1.othList" :key="index" :src="getImgUrl(item.cuIcon)" alt="">
            </div>
          </dd>
        </dl>
      </div>
    </div>
    <div class="t-bottom-img">
      <div v-if="pageData.unibtm && pageData.unibtm.btCrets">
        <img v-for="(item, index) in pageData.unibtm.btCrets" :key="index" :src="getImgUrl(item.btCrets)" alt="">
      </div>
    </div>
    <div class="t-bottom-ba">
      <a href="#">鲁ICP备XXXXXXX号</a>
    </div>
  </div>
</template>

<script setup name="TBottom">
import {getModelData} from "@/api/model.js";
import {useTcRouter} from "../../utils/routeUtils.js";

const {proxy} = getCurrentInstance();

const {goPage} = useTcRouter();

const bottomList = ref([
  {
    localName: 'FLAME RETARDANT',
    localLink: '',
    localType: 'list',
    children: [
      {
        localName: 'Borminated',
      },
      {
        localName: 'Phosphorus',
      },
      {
        localName: 'Halogen Free',
      },
      {
        localName: 'Inorganic',
      }
    ],
  },
  {
    localName: 'FLAME RETARDANT',
    localLink: '',
    localType: 'list',
    children: [
      {
        localName: 'Borminated',
      },
      {
        localName: 'Phosphorus',
      },
      {
        localName: 'Halogen Free',
      },
      {
        localName: 'Inorganic',
      }
    ],
  },
  {
    localName: 'ABOUT US',
    localLink: '',
    localType: 'area',
    children: [
      {
        localName: 'We are good company, nice to meet you, and we hope help you to use money',
      }
    ],
  },
  {
    localName: 'FLAME RETARDANT',
    localLink: '',
    localType: 'icons',
    children: [
      {
        localName: 'Borminated',
      },
      {
        localName: 'Phosphorus',
      },
      {
        localName: 'Halogen Free',
      },
      {
        localName: 'Inorganic',
      }
    ],
  }
])

const pageData = ref('');

const loadPageData = async () => {
  const language = proxy.getLanguage();
  const modelKey = 'uniBottom';
  // 获取数据
  const res = await getModelData(modelKey, language);
  if (res && res.code === 200) {
    // 判断是否有数据
    if (res.data) {
      pageData.value = JSON.parse(res.data);
    }
  }
}

onBeforeMount(() => {
  loadPageData();
})

</script>

<style lang="scss" scoped>
.bottoms {
  background-color: rgb(240, 242, 241);
}

.t-bottom {
  width: 70vw;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;


  &-item {
    flex: 1;
    width: 0;
    margin-right: 20px;
    color: rgb(1, 74, 129);

    dl {

      > dt {
        // line-height: 40px;
        margin: 10px 0;
        font-weight: 600;
        cursor: pointer;
      }

      dd {
        margin-left: 0;
        line-height: 30px;
        cursor: pointer;
      }
    }

    &-icons {

      > dt {

      }

      > dd {

        > img {
          width: 60%;
        }

        .t-bottom-item-icons-group {
          display: flex;
          align-items: center;

          > img {
            width: 30px;
            height: 30px;
            margin-right: 4px;
          }

        }
      }
    }

    &-area {

    }
  }

  &-item:last-child {
    margin-right: 0;
  }
}

.t-bottom-img {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;

  > div {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 70vw;

    > img {
      height: 60px;
    }
  }
}

.t-bottom-ba {
  margin-top: 40px;
  text-align: center;
  line-height: 40px;
}
</style>
